<!DOCTYPE html>
<html>

<head>
    <title>魔方</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 300px;
            height: 300px;
            margin: 150px auto;
            /*border: 1px solid #000;*/
            /*调整视口距离*/
            perspective: 20000px;
        }
        
        .box {
            width: 300px;
            height: 300px;
            /*保持3D转换位置*/
            transform-style: preserve-3d;
            /*测试*/
            /*transform: rotateX(45deg) rotateY(45deg);*/
            animation: a 5s linear infinite;
        }
        
        @keyframes a {
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        
        .page {
            width: 300px;
            height: 300px;
            /*绝对定位*/
            position: absolute;
            transform-style: preserve-3d;
        }
        
        .page_top {
            transform: translateZ(150px);
        }
        
        .page_bottom {
            transform: translateZ(-150px) rotateY(180deg);
        }
        
        .page_left {
            transform: translateX(-150px) rotateY(-90deg);
        }
        
        .page_right {
            transform: translateX(150px) rotateY(90deg);
        }
        
        .page_before {
            transform: translateY(150px) rotateX(-90deg);
        }
        
        .page_after {
            transform: translateY(-150px) rotateX(90deg);
        }
        
        .page>div {
            width: 100px;
            height: 100px;
            border: 1px solid #fff;
            box-sizing: border-box;
            /*初始化小方块的位置*/
            position: absolute;
            background-color: pink;
            background-size: 300px 300px;
        }
        
        .page>div:nth-child(1) {
            /*transform: translateZ(200px);*/
            animation: r 5s ease-in infinite;
        }
        
        .page>div:nth-child(2) {
            /*transform: translateZ(200px);*/
            animation: r 5s ease-in infinite;
        }
        
        .page>div:nth-child(3) {
            /*transform: translateZ(200px);*/
            animation: r 5s ease-in infinite;
        }
        
        .page>div:nth-child(4) {
            /*transform: translateZ(200px);*/
            animation: r 5s ease-in infinite;
        }
        
        .page>div:nth-child(5) {
            /*transform: translateZ(200px);*/
            animation: r 5s ease-in infinite;
        }
        
        .page>div:nth-child(6) {
            /*transform: translateZ(200px);*/
            animation: r 5s ease-in infinite;
        }
        
        .page>div:nth-child(7) {
            /*transform: translateZ(200px);*/
            animation: r 5s ease-in infinite;
        }
        
        .page>div:nth-child(8) {
            /*transform: translateZ(200px);*/
            animation: r 5s ease-in infinite;
        }
        
        .page>div:nth-child(9) {
            /*transform: translateZ(200px);*/
            animation: r 5s ease-in infinite;
        }
        
        @keyframes r {
            0% {
                transform: translateZ(0px) scale(1) rotateZ(0deg);
            }
            30% {
                transform: translateZ(0px) scale(1) rotateZ(0deg);
            }
            40% {
                transform: translateZ(600px) scale(0) rotateZ(720deg);
            }
            60% {
                transform: translateZ(600px) scale(0) rotateZ(720deg);
            }
            70% {
                transform: translateZ(0px) scale(1) rotateZ(0deg);
            }
            100% {
                transform: translateZ(0px) scale(1) rotateZ(0deg);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <div class="page page_top"></div>
            <div class="page page_bottom"></div>
            <div class="page page_left"></div>
            <div class="page page_right"></div>
            <div class="page page_before"></div>
            <div class="page page_after"></div>
        </div>
    </div>
    <script type="text/javascript">
        //找到页面中的六个面
        var arr = document.querySelectorAll(".page");
        //通过遍历找到每一个面

        for (var n = 0; n < arr.length; n++) {
            //遍历行
            var x = Math.floor(Math.random() * (8 - 0) + 0);
            for (var i = 0; i < 3; i++) {
                //遍历列
                for (var j = 0; j < 3; j++) {
                    var divs = document.createElement("div");
                    divs.style.cssText = "background-image:url('img/" + x + ".webp')";
                    arr[n].appendChild(divs);
                    divs.style.left = 100 * j + "px";
                    divs.style.top = 100 * i + "px";
                    divs.style.backgroundPositionX = -100 * j + "px";
                    divs.style.backgroundPositionY = -100 * i + "px";
                }
            }
        }
    </script>
</body>

</html>